<template>
  <div class="page-note">
    <page-cover
      bg="https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/48380973b3514d2ca84472bf697088d7.png"
    >
      <div class="title">✍️行有余力 , 写点笔记!</div>
      <p>
        <span>文章 {{ covering(articleStatistics.articleNum) || "-" }}</span>
        ·
        <span>原创{{ covering(articleStatistics.originalNum) || "-" }}</span>
        ·
        <span>分类 {{ covering(articleStatistics.classifyNum) || "-" }}</span>
      </p>
    </page-cover>

    <main>
      <div class="classify">
        <div @click="$router.push('/note/articleClassify')" class="title">
          <div class="left">
            <svg-icon icon-class="sort"></svg-icon>
            分类
          </div>
          <div class="right">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="list">
          <div
            v-for="(item, index) in classifyList"
            :key="index"
            class="item"
            @click="
              $router.push({
                name: 'classifyDetail',
                params: { id: item.articleClassifyId },
              })
            "
          >
            <p class="name">
              <span>#</span>
              {{ item.name }}
            </p>
            <p>文章数量 : {{ covering(item.articleNum) }}篇</p>
          </div>
          <div class="item placeholder"></div>
          <div class="item placeholder"></div>
          <div class="item placeholder"></div>
          <div class="item placeholder"></div>
        </div>
      </div>
      <div class="container">
        <article>
          <!-- 精选 -->
          <div v-if="recommendArticle[0]" class="selected">
            <div class="title">
              <svg-icon icon-class="recommend"></svg-icon>
              精选
            </div>
            <div class="list">
              <div
                v-for="(item, index) in recommendArticle"
                :key="index"
                @click="toPage(item)"
                class="item"
              >
                <span class="sort">{{ index + 1 }}</span>
                <span class="text">{{ item.title }}</span>
              </div>
            </div>
          </div>

          <div class="note-list">
            <article-lists
              @paging="switchPaging"
              :lists="articleList"
              :loading="loading"
              :loadEnd="loadEnd"
            ></article-lists>
          </div>
        </article>
        <nav v-if="true">
          <div class="title">
            <svg-icon icon-class="sort"></svg-icon>
            分类
          </div>
          <div class="list">
            <div
              v-for="(item, index) in classifyList"
              :key="index"
              class="list-item"
              @click="
                $router.push({
                  name: 'classifyDetail',
                  params: { id: item.articleClassifyId },
                })
              "
            >
              <p class="name">
                <span>#</span>
                {{ item.name }}
              </p>
              <p>文章数量 : {{ covering(item.articleNum) }}篇</p>
            </div>
          </div>
          <div v-if="classifyTotal > 6" class="more">
            <div @click="$router.push('/note/articleClassify')" class="text">
              更多
            </div>
          </div>
        </nav>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script>
import pageCover from "@/components/page-cover/page-cover";
import articleLists from "@/components/article-lists/article-lists";

export default {
  name: "WorkspaceJsonNote",
  components: {
    pageCover,
    articleLists,
  },
  data() {
    return {
      postData: {
        pageSize: 8,
        pageIndex: 1,
      },
      loading: true,
      loadEnd: false,
      articleTotal: 0,
      articleList: [],
      recommendArticle: [],
      classifyList: [],
      classifyTotal: 0,

      articleStatistics: {},
    };
  },

  mounted() {
    this.getArticleList();
    this.getFilterArticleList();
    this.getClassifyList();
    this.getArticleStatistics();
  },

  methods: {
    // 获取筛选文章
    getFilterArticleList() {
      this.$http("getFilterArticleList", { type: 1 }).then((res) => {
        this.recommendArticle = res.data;
      });
    },
    // 获取文章统计数据
    getArticleStatistics() {
      this.$http("getArticleStatistics").then((res) => {
        this.articleStatistics = res.data;
      });
    },
    // 获取分类列表
    getClassifyList() {
      this.$http("getClassifyList", { pageSize: 6, sort: 1 }).then((res) => {
        this.classifyList = res.data.lists;
        this.classifyTotal = res.data.total;
      });
    },
    // 获取文章列表
    getArticleList(type) {
      this.$http("getArticleList", this.postData).then((res) => {
        if (type == "page") {
          this.articleList = [...this.articleList, ...res.data.lists];
        } else {
          this.articleList = res.data.lists;
        }

        this.articleTotal = res.data.total;
        // 是否加载完毕
        if (res.data.lists.length < this.postData.pageSize) {
          this.loadEnd = true;
        }

        this.loading = false;
      });
    },
    covering(num = 0) {
      return num > 9 ? num : "0" + num;
    },
    switchPaging() {
      this.loading = true;
      this.postData.pageIndex += 1;
      this.getArticleList("page");
    },
    toPage(item) {
      this.$router.push(`/note/articleDetail/${item.articleId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.page-note {
  cursor: pointer;
}

.cover {
  .title {
    font-size: 30px;
    font-weight: 600;
  }
  p {
    font-size: 16px;
    opacity: 0.8;
    margin-top: 5px;
    span {
      margin: 0 5px;
    }
  }
}

main {
  max-width: 1100px;
  margin: auto;
  margin-top: -80px;
  position: relative;
  z-index: 1;
  padding: 0 10px;

  .container {
    display: flex;
    align-items: flex-start;
  }
}

.classify {
  display: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  margin-bottom: 20px;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    .item {
      flex: 1;
      min-width: 200px;
      padding: 10px;
      .name {
        color: #666;
        &:hover {
          color: #2ebc3c !important;
        }
      }
      p {
        &:nth-child(2) {
          padding-left: 20px;
          font-size: 14px;
          color: #c1c1c1;
        }
      }
    }
    .placeholder {
      padding: 0 10px;
    }
  }
}

article {
  flex: 1;

  .selected {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);

    .title {
      padding: 10px 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    .list {
      padding: 10px 0;
    }
    .item {
      padding: 8px 15px;
      display: flex;
      align-items: center;
      .sort {
        flex: none;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #fe4c41;
        color: #fff;
        border-radius: 3px;
        font-size: 14px;
        margin-right: 10px;
      }
      .text {
        @include main-text-hidden(1);
      }

      &:nth-child(2) {
        .sort {
          background: #fd8247;
        }
      }
      &:nth-child(3) {
        .sort {
          background: #ffc106;
        }
      }
      &:nth-child(4) {
        .sort {
          background: #7c86ee;
        }
      }
      &:nth-child(5) {
        .sort {
          background: #74be6e;
        }
      }
      &:nth-child(6) {
        .sort {
          background: #e6b95a;
        }
      }
    }
  }

  .note-list {
    margin-top: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  }
}

nav {
  width: 280px;
  background: #fff;
  margin-left: 15px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  position: sticky;
  top: 80px;

  .title {
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
  }

  .list {
    min-height: 400px;
    padding: 10px;
    flex: 1;

    .list-item {
      padding: 0 5px;
      letter-spacing: 1.2px;
      margin-bottom: 15px;
      user-select: none;
      .name {
        color: #666;
        &:hover {
          color: #2ebc3c !important;
        }
      }
      p {
        &:nth-child(2) {
          padding-left: 20px;
          font-size: 14px;
          color: #c1c1c1;
        }
      }
    }
  }

  .more {
    border-top: 1px solid #f5f5f5;
    .text {
      padding: 10px;
      text-align: center;
      margin: 5px 10px 10px;
      border-radius: 5px;
      font-size: 14px;
      color: #333;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}

footer {
  height: 200px;
}

@media (max-width: 900px) {
  nav {
    display: none;
  }
  .classify {
    display: block !important;
  }
}

@media (max-width: 550px) {
  .classify {
    p {
      &:nth-child(1) {
        font-size: 15px !important;
      }
      &:nth-child(2) {
        font-size: 13px !important;
        padding-left: 15px !important;
      }
    }
  }
  .selected {
    .item {
      .text {
        font-size: 15px;
      }
    }
  }
  .classify {
    .item {
      min-width: 40% !important;
    }
  }
}
</style>
